<template>
     <el-card class="box-card">
      <div >
        <p>素材管理</p>
        <hr>
        <div style="float:right">
              <!-- 组件 -->
            <el-upload
                action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
                :show-file-list="false"
                :on-success="uploadSuccess"
                :headers="upHeaders"
                name="image"
            >
             <el-button size="small" type="primary">点击上传</el-button>
             </el-upload>
        </div>
      </div>
        <ul>
        <li class="image-box" v-for="item in imageList" :key="item.id">
            <img :src="item.url" alt>
            <div class="image-bot">
            <el-button type="success" icon="el-icon-star-off" circle ></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
            </div>
        </li>
        </ul>

     </el-card>
</template>

<script>
export default {
  name: 'materialCom',
  created () {
    this.getImageList()
  },
  data () {
    return {
      imageList: [],
      querycdt: {
        collect: false,
        page: 1,
        per_page: 20
      },
      //   上传图片的token定义
      upHeaders: { Authorization: 'Bearer ' + window.sessionStorage.getItem('token') }
    }
  },
  methods: {
    // 获得全部的素材图片
    getImageList () {
      var pro = this.$http.get('/user/images', {
        params: this.querycdt
      })
      pro
        .then(result => {
          this.imageList = result.data.data.results
        })
        .catch(err => {
          return this.$message.error('获取图片列表失败' + err)
        })
    },
    // 上传成功后的处理
    uploadSuccess (rst) {
      // rst是被上传图片的对象信息
      this.$message.success('图片上传成功！')
      // 更新素材图片列表
      this.getImageList()
    }
  }

}
</script>

<style lang='less' scoped>
.image-box {
  list-style: none;
  width: 200px;
  height: 200px;
  background-color: #fff;
  margin: 10px;
  float: left;
  border: 1px solid #eee;
  img {
    width: 200px;
    height: 140px;
  }
  .image-bot {
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
}
</style>
